<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘抢购</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
    <div class="tao">
        <img src="img/img.ipg.png" alt="">
       <p id="btn">换一换 &bnot;更多></p>
    </div>
    <div id="list"></div>
</div>
    <script>
//        初始值
        var page = 1;
//        给换一换加点击事件
        document.querySelector("#btn").addEventListener('click',function () {
//           让page加1
            page++;
            if(page>=3){page=1}
//            解决追加问题
            document.querySelector("#list").innerHTML = "";
//            执行ajax方法
            loadXMLDoc();
        });



//        获取json数据用的ajax方法
        function  loadXMLDoc() {
            var xmlhttp;
            if (window.XMLHttpRequest) {
//
                xmlhttp = new XMLHttpRequest();
            }
            else {
//    IE6,IE5     浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var json = xmlhttp.responseText;
//                把获取到数据.转成数组对象格式，方便js操作
                    json = JSON.parse(json);
                    for (let i = 0; i < json.shop.length; i++) {
                        console.log(json.shop[i]);
//                创建节点
                        var img = document.createElement('img');
                        img.src = json.shop[i].pic;
//                创建h3节点
                        var h3 = document.createElement('h3');
                        h3.innerHTML = json.shop[i].title;
//                创建p节点
                        var p = document.createElement('p');
                        p.innerHTML = json.shop[i].price;
//                创建div节点
//                        var qwe = document.createElement("div");
//                        qwe.className='box1';
//                        var asd = document.createElement("div");
                        var div = document.createElement('div');
                        div.className='tb';
//                向div标签追加3个子标签
                        div.appendChild(img);
                        div.appendChild(h3);
                        div.appendChild(p);
//                        qwe.appendChild(asd);
//                        div.appendChild(qwe);

                        console.log(div);
//                把3个div标签追加到最大的div3#list标签
                        document.querySelector("#list").appendChild(div)
                    }
                }
            }
         xmlhttp.open("GET",page + ".json",true);
         xmlhttp.send();
        }
//       先执行一遍ajax方法
        loadXMLDoc();
    </script>
</body>
</html>